<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>留言板</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function() {
		// 直接发送 AJAX 请求
		$.ajax({
			url: '/message/getMessageById', // 请求的 URL
			type: 'GET', // 请求类型
			dataType: 'json', // 预期的服务器响应的数据类型
			success: function(response) {
				if (response.code == 200) {
					var tbody = $('#tbody');
					$.each(response.data, function(index, message) {
						// 创建一个新的 tr 元素
						var tr = $('<tr></tr>');
						tr.append($('<td></td>').text(message.title));
						tr.append($('<td  class="message-content"></td>').text(message.content));
						// tr.append($('<td class="timestamp"></td>').text(message.date));
						tr.append($('<input>', {
							type: 'hidden',
							value: message.id,
							name: 'messageid' // 可以添加一个 name 属性
						}));
						tr.append($('<input>', {
							type: 'hidden',
							value: message.userid,
							name: 'messageuserid' // 可以添加一个 name 属性
						}));
						// 将 tr 元素附加到 tbody 上
						tbody.append(tr);
					});
					// 为动态添加的 tr 元素绑定点击事件
					tbody.on('click', 'tr', function() {
						var messageuserid = $(this).find('input[name="messageuserid"]').val();
						var messageid = $(this).find('input[name="messageid"]').val();
						var content = $(this).find('.message-content').text();
						localStorage.setItem('content', content);
						localStorage.setItem('messageuserid', messageuserid);
						localStorage.setItem('messageid', messageid);
						localStorage.setItem('isself', true);
						window.location.href = 'message.html';
					});
				}
			},
		});
	});
	$(document).ready(function () {
	$('#search').submit(function(event) {
		event.preventDefault(); // 阻止表单的默认提交行为
		var formData = $(this).serialize();
		$.ajax({
			url: '/message/getMessageByTag', // 请求的 URL
			type: 'GET', // 请求类型
			data: formData,
			dataType: 'json', // 预期的服务器响应的数据类型
			success: function(response) {
				if (response.code == 200) {
					var tbody = $('#tbody');
					tbody.empty();
					$.each(response.data, function(index, message) {
						var tr = $('<tr></tr>');
						tr.append($('<td></td>').text(message.title));
						tr.append($('<td  class="message-content"></td>').text(message.content));
						tr.append($('<input>', {
							type: 'hidden',
							value: message.id,
							name: 'messageid' // 可以添加一个 name 属性
						}));
						tr.append($('<input>', {
							type: 'hidden',
							value: message.userid,
							name: 'messageuserid' // 可以添加一个 name 属性
						}));
						tbody.append(tr);
					});
					tbody.on('click', 'tr', function() {
						var messageuserid = $(this).find('input[name="messageuserid"]').val();
						var messageid = $(this).find('input[name="messageid"]').val();
						var content = $(this).find('.message-content').text();
						localStorage.setItem('content', content);
						localStorage.setItem('messageuserid', messageuserid);
						localStorage.setItem('messageid', messageid);
						localStorage.setItem('isself', true);
					});
				}
			},
		})

	});
	});
</script>
<body>
<div class="top">
	<h1>用户中心</h1>
	<div class="container">
		<div class="section">
			<a href="user.html">修改个人信息</a>
		</div>
		<div class="section">
			<a href="index.html">留言板</a>
		</div>
		<div class="section">
			<a href="user_index.html">个人主页</a>
		</div>
	</div>
</div>


<div class="body">
	<form action="" id="search">
<div class="search-container">
	<span class="search-label">搜索</span>
	<input type="text" class="search-input" name="tag" placeholder="请输入搜索内容...">
	<div class="search-icon"></div>
</div>
	</form>
	<div class="link-container">
		<a href="addmessage.html">添加留言</a>
	</div>
	<table>
		<thead>
		<tr>
			<th>用户标题</th>
			<th>留言内容</th>
		</tr>
		</thead>
		<tbody id="tbody">


		</tbody>
	</table>
</div>
</body>
</html>